import React, { Component, Fragment } from 'react';

class TodoList extends Component{
	constructor(props){
		super(props);
		this.state={
			inputValue: 'hhhh',
			list: []
		}
		this.hanleChange = this.hanleChange.bind(this);
		this.hanleAdd = this.hanleAdd.bind(this);
	}
	render() {
		return (
			<Fragment>
				<div>
					<input value={this.state.inputValue} onChange={this.hanleChange} />
					<button onClick={this.hanleAdd}>提交</button>
				</div>
				<ul>
					{this.state.list.map((item, index) => {
						return <li onClick={this.deleteItm.bind(this, index)} key={item}>{item}</li>
					})}
				</ul>
			</Fragment>
		)
	}


	hanleChange(e){
		const value = e.target.value;
		this.setState(() => ({
			inputValue: value
		}))
	}

	hanleAdd() {
		this.setState((prevState) => ({
			list: [...prevState.list, prevState.inputValue]
		}))
	}

	deleteItm(index){
		const list = [...this.state.list];
		list.splice(index, 1)
		this.setState({
			list: list
		})
	}

}

export default TodoList;